<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Select</title>
</head>

<body>
    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        <h3>使用数组作为select内容</h3>
        <p>
            Angular选择框（使用ng-options指令）：
            <select data-ng-model="selectedSite" data-ng-options="x.site for x in sites"></select><br />
            <span>你选择的是:{{selectedSite}}</span><br />
            <span>项是:{{selectedSite.site}}</span><br />
            <span>网址是:{{selectedSite.url}}</span>
        </p>
        <p>
            Angular选择框（使用option）：
            <select data-ng-model="selectedSite2">
                <option value="{{x.url}}" data-ng-repeat="x in sites">{{x.site}}</option>
            </select>
            <br />
            <span>你选择的是:{{selectedSite2}}</span>
        </p>

        <h3>使用对象作为select内容</h3>
        <p>
            使用一般key-value对象：
            <select data-ng-model="selectedSite3" data-ng-options="x for (x, y) in sites2"></select><br />
            <span>你选择的是:{{selectedSite3}}</span>
        </p>
        <p>
            使用value为对象的对象：
            <select data-ng-model="selectedCar" data-ng-options="x for (x, y) in cars"></select><br />
            <span>你选择的是:{{selectedCar}}</span>
        </p>
        <p>
            使用value为展示项：
            <select data-ng-model="selectedCar2" data-ng-options="y.brand for (x, y) in cars"></select><br />
            <span>你选择的是:{{selectedCar2}}</span>
        </p>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="select.js"></script>
</body>

</html>
